<template>
  <div class="p-4 flex flex-col items-center">
    <h1 class="text-3xl font-bold text-blue-600">TailwindCSS测试</h1>
    <p class="mt-2 text-red-500 text-right">如果这个文本是蓝色的，说明TailwindCSS工作正常</p>
    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      测试按钮
    </button>
    <wd-button>主要按钮</wd-button>
    <wd-button type="success">成功按钮</wd-button>
    <wd-button type="info">信息按钮</wd-button>
    <wd-button type="warning">警告按钮</wd-button>
    <wd-button type="error">危险按钮</wd-button>
  </div>

  <FirstComponent />

</template>
<script setup>
import { onHide, onLoad, onShow } from '@dcloudio/uni-app';
import { onMounted } from 'vue';
import FirstComponent from '../../components/FirstComponent.vue';

onMounted(() => {
  console.log('Index onMounted');
});


onLoad(() => {
  console.log('Index onLoad');
})

onShow(() => {
  console.log('Index onShow');
})

onHide(() => {
  console.log('Index onHide');
})

</script>
<style lang="scss"></style>
